{% extends "base_electric.html" %}
{% load custom %}

{% block left_content %}
    <div class="row">
        <div class="well">
            <div class="btn-group">
                <a href="/electric/bar/{{ date|previousday:"%Y/%m/%d/" }}">
                    <button class="btn btn-small"><i class="icon-step-backward">></i></button>
                </a>
                {#        </div>#}
                {#        <div class="span2 pull-right">#}
                <button class="btn btn-small btn-info disabled">{{ date|date:'M j, Y' }}</button>
                {% if not date|istoday %}<a href="/electric/bar/{{ date|nextday:"%Y/%m/%d/" }}">{% endif %}
                    <button class="btn btn-small pull-right {% if date|istoday %}disabled{% endif %}"><i class="icon-step-forward">></i></button>
                {% if not date|istoday %}</a>{% endif %}
                {% if not date|istoday %}<a href="/electric/bar/day/">{% endif %}
                    <button class="btn btn-small pull-right {% if date|istoday %}disabled{% endif %}"><i class="icon-fast-forward">></i></button>
                {% if not date|istoday %}</a>{% endif %}
            </div>
        </div>
    </div>
    {% if statistics %}
        <div class="row">
            <div class="well">
                <h4>Statistics</h4>
                <br>
                <table class="table table-condensed stat">
                    <thead>
                    <tr>
                        <th></th>
                        <th>used</th>
                        <th>budget</th>
                        <th>last</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th>kW·h</th>
                        <td>{{ statistics.kwtotal|floatformat:1 }}</td>
                        <td>{{ statistics.kwbudget|floatformat:1 }}<br>
                            {{ statistics.budgetpercent|percent }}%
                            {% if statistics.budgetpercent > 0 %}
                                <i class="icon-arrow-up"></i>
                            {% elif statistics.budgetpercent < 0 %}
                                <i class="icon-arrow-down"></i>
                            {% endif %}
                        </td>
                        <td>{{ statistics.lastday|floatformat:1 }}<br>
                            {{ statistics.lastdaypercent|percent }}%
                            {% if statistics.lastdaypercent > 0 %}
                                <i class="icon-arrow-up"></i>
                            {% elif statistics.lastdaypercent < 0  %}
                                <i class="icon-arrow-down"></i>
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <th>$</th>
                        <td>{{ statistics.kwtotalcost|floatformat:2 }}</td>
                        <td>{{ statistics.kwbudgetcost|floatformat:2 }}</td>
                        <td>{{ statistics.lastdaycost|floatformat:2 }}</td>
                    </tr>
                    <tr>
                        <th>$/year</th>
                        <td>{{ statistics.kwyearcost|floatformat:0 }}</td>
                        <td>{{ statistics.kwbudgetcostyear|floatformat:0 }}</td>
                        <td>{{ statistics.lastdaycostyear|absolute|floatformat:0 }}</td>
                    </tr>
                    </tbody>
                </table>
                <table class="table table-condensed stat">
                    <thead>
                        <tr>
                            <th></th>
                            <th>avg</th>
                            <th>change</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th>7 day</th>
                            <td>{{ statistics.average7|floatformat:1 }} kW·h</td>
                            <td>
                                {{ statistics.average7_delta|percent}}%
                                {% if statistics.average7_delta > 0 %}
                                    <i class="icon-arrow-up"></i>
                                {% elif statistics.average7_delta < 0 %}
                                    <i class="icon-arrow-down"></i>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>14 day</th>
                            <td>{{ statistics.average14|floatformat:1 }} kW·h</td>
                            <td>
                                {{ statistics.average14_delta|percent}}%
                                {% if statistics.average14_delta > 0 %}
                                    <i class="icon-arrow-up"></i>
                                {% elif statistics.average14_delta < 0 %}
                                    <i class="icon-arrow-down"></i>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>28 day</th>
                            <td>{{ statistics.average28|floatformat:1 }} kW·h</td>
                            <td>
                                {{ statistics.average28_delta|percent}}%
                                {% if statistics.average28_delta > 0 %}
                                    <i class="icon-arrow-up"></i>
                                {% elif statistics.average28_delta < 0 %}
                                    <i class="icon-arrow-down"></i>
                                {% endif %}
                            </td>
                        </tr>
                    </tbody>
                </table>
                <ul class="unstyled">
                    <li>Est. Cost: $<strong>{{ statistics.kwcost|floatformat:4 }}</strong>/kW·h
                        {% if statistics.lastbill %}
                            based on bill ending on <strong>{{ statistics.lastbill|date:'DATE_FORMAT' }}</strong>
                        {% endif %}
                    </li>
                </ul>
                <ul class="unstyled">
                    <li>Last update:
                        <strong>
                            {% if statistics.lastupdate|istoday %}
                                Today at {{ statistics.lastupdate|date:'P' }}
                            {% else %}
                                {{ statistics.lastupdate|date:'n/j @ P' }}
                            {% endif %}
                        </strong>
                    </li>
                </ul>
            </div>
        </div>
    {% endif %}
{% endblock %}



{% block content_electric %}
    <h1>Electricity Use <small>{{ date|date:'DATE_FORMAT' }}</small></h1>
    <h2>Hourly Summary</h2>
    <div id='chart'>
        <img id="hour_chart_image" src="{{ hourchart }}" height="150">
    </div>
    <hr/>
    <h2>Budget
        <small>
            {% if statistics.budgetdate %}set
                {% if statistics.budgetdate|istoday %}
                    today
                {% else %}
                    on {{ statistics.budgetdate|date:'DATE_FORMAT' }}
                {% endif %}
            {% else %}
                default budget
            {% endif %}
        </small>
    </h2>
    <div id="mini_display_budget" style="">
        <div id="budget_message_container">
            <p>
                {% if statistics.budgetpercent > 0.01 %}
                    <strong>{{ statistics.budgetpercent|percent }}% over</strong>
                {% else %}
                    {% if statistics.budgetpercent < -0.01 %}
                        <strong>{{ statistics.budgetpercent|percent }}% under</strong>
                    {% else %}
                        <strong>about even</strong> with
                    {% endif %}
                {% endif %}
                budget
                {% if date|istoday %}
                    so far today.
                {% else %}
                    for {{ date|date:'l' }}.
                {% endif %}
            </p>
        </div>
        <div id="budget_chart">
            <img id="budget_chart_image" src="{{ budgetchart|safe }}" height="34">
        </div>
    </div>
    <hr/>
    <h2>Running Average</h2>
    <img id="average_chart_image" src="{{ averagechart }}" height="300">
    <hr/>
    <h2>Detailed Usage</h2>
    <a href="{{ settings.MEDIA_URL }}charts/{{ date|date:'Ymd' }}.png">img</a>
    <a href="/electric/timeline/{{ date|date:'Y/m/d' }}">flash</a>
    <div><a href="{{ settings.MEDIA_URL }}charts/{{ date|date:'Ymd' }}.png"><img src="{{ settings.MEDIA_URL }}charts/{{ date|date:'Ymd' }}-small.png" border="0" /></a></div>

{% endblock %}

